<template>
	<html class="no-js" lang="en">
		<body id="top">
			<section id="page-header">
				<div class="row current-cat">
					<div class="col-full">
						<h1>书籍</h1>
					</div>
				</div>
			</section>

			<section id="bricks" class="with-top-sep">

				<div class="row masonry">

					<!-- brick-wrapper -->
					<div class="bricks-wrapper">

						<div class="grid-sizer"></div>

					<!-- 数据展示 -->	
					<article1 v-for="item in items"
					:description='item.description' 
					:name="item.name" 
					:key='item.id'
					:id="item.id"
					:picture="item.picture"
					:flags='1'></article1>

						

					</div> <!-- end brick-wrapper -->

				</div> <!-- end row -->

				<div class="row">

					<nav class="pagination">
						<span class="page-numbers prev inactive">Prev</span>
						<span class="page-numbers current">1</span>
						<a href="#" class="page-numbers">2</a>
						<a href="#" class="page-numbers">3</a>
						<a href="#" class="page-numbers">4</a>
						<a href="#" class="page-numbers">5</a>
						<a href="#" class="page-numbers">6</a>
						<a href="#" class="page-numbers">7</a>
						<a href="#" class="page-numbers">8</a>
						<a href="#" class="page-numbers">9</a>
						<a href="#" class="page-numbers next">Next</a>
					</nav>

				</div>

			</section> <!-- bricks -->
		</body>
	</html>
</template>

<script>
	import article1 from './article/article1.vue'
	export default {
		name: "book",
		components:{
			article1
		},
		data() {
			return {
				items: [
					{
						id: 1,
						name: 'yyq',
						description: '123',
						picture: require('@/assets/images/thumbs/gallery/work1.jpg')
					},
					{
						id: 2,
						name: 'frank',
						description: '456',
						picture: require('@/assets/images/thumbs/gallery/work1.jpg')
					}
				]
			}
	}
	}
</script>

<style>
</style>
